<template>
  <div>
    <h1>Radio 单选框</h1>
    <p>在一组备选项中进行单选</p>
    <h2>基础用法</h2>
    <div class="demo-block">
      <div class="demo-block-content">
        <div class="demo-block-content-row">
          <az-radio v-model="value1" label="ys">原神</az-radio>
          <az-radio v-model="value1" label="sr">崩坏：星穹铁道</az-radio>
          <p>选中的值是：{{ value1 }}</p>

        </div>
      </div>
      <div class="demo-block-code">
        <pre><code class="language-html">{{ example1 }}</code></pre>
      </div>
    </div>
    <h2>Radio Group</h2>
    <p>搭配az-radio-group使用</p>
    <div class="demo-block">
      <div class="demo-block-content">
        <div class="demo-block-content-row">
          <az-radio-group v-model="value2">
            <az-radio label="ys">原神</az-radio>
            <az-radio label="sr">崩坏：星穹铁道</az-radio>
          </az-radio-group>
          <p>选中的值是：{{ value2 }}</p>
        </div>
      </div>
      <div class="demo-block-code">
        <pre><code class="language-html">{{ example2 }}</code></pre>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref } from 'vue'

const value1 = ref('')
const value2 = ref('')
const example1 = `<az-radio v-model="value1" label="ys">原神</az-radio>
<az-radio v-model="value1" label="sr">崩坏：星穹铁道</az-radio>`
const example2 = `<az-radio-group v-model="value2">
  <az-radio label="ys">原神</az-radio>
  <az-radio label="sr">崩坏：星穹铁道</az-radio>
</az-radio-group>`
</script>
